<template>
  <div class="car">
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click="danxuan(item)"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          desc="描述信息"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-button size="mini" @click="delgoods(item)">删除</van-button>
          </template>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// 引入 购物车数据
import { getCarData, changeChecked, deleteGoods } from "@/utils/http";
export default {
  name: "Car",
  props: [""],
  data() {
    return {
      result: [],
      cartList: [], // 购物车数组
      checked: false, // 全选状态
      totalPrice: 0, // 总价
    };
  },
  computed: {},
  created() {
    // 请求购物车数据
    getCarData().then((res) => {
      console.log(res);
      //初始化购物车商品数据
      this.cartList = res.data.data.cartList;
      // 初始化单选状态
      this.cartList.forEach((item) => {
        if (item.checked == 1) {
          this.result.push(item);
        }
      });
      // 初始化全选状态
      if (this.cartList.length > 0) {
        this.checked = this.cartList.every((item) => {
          return item.checked == 1;
        });
      } else {
        this.checked = false;
      }
      // 初始化商品总价赋值
      this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
    });
  },
  methods: {
    checkAll() {
      // console.log(this.checked)
      // 全选或者全不选
      let productIds = this.cartList.map((item) => {
        return item.product_id;
      });
      // console.log(productIds.join(","));
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
      // console.log(this.result);
      let params = {
        isChecked: this.checked ? 1 : 0,
        productIds: productIds.join(","),
      };
      changeChecked(params).then((res) => {
        // console.log(res);
        // 商品总价赋值
        this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
      });
    },
    danxuan(item) {
      console.log(this.result);
      if (
        this.result.length == this.cartList.length &&
        this.cartList.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      let flag = this.result.includes(item);
      console.log(flag);
      // 获取当前的点击状态
      changeChecked({
        isChecked: flag ? 1 : 0,
        productIds: item.product_id,
      }).then((res) => {
        // 商品总价赋值
        this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
        if (res.data.errno !== 0) {
          this.$toast({
            message: "失败",
            duration: 500,
          });
        }
      });
    },
    delgoods(item) {
      deleteGoods({ productIds: String(item.product_id) }).then((res) => {
        console.log(res);
        // 重新渲染购物车数据
        this.cartList = res.data.data.cartList;
        // 重新计算商品总价赋值
        this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
        // 初始化单选状态
        this.result = []; // 清空
        this.cartList.forEach((item) => {
          if (item.checked == 1) {
            this.result.push(item);
          }
        });
        // 判断全选状态
        if (
          this.result.length == this.cartList.length &&
          this.cartList.length != 0
        ) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      });
    },
    onSubmit() {
      // 提交订单
    },
    onClickEditAddress() {
      // 修改地址
    },
  },
};
</script>
<style lang='less' scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
</style>